<!doctype html>
<html>
<head>
  <meta charset='utf-8' />
  <title>react-d3-graph 2.0.2 | Documentation</title>
  <meta name='viewport' content='width=device-width,initial-scale=1'>
  <link href='assets/bass.css' type='text/css' rel='stylesheet' />
  <link href='assets/style.css' type='text/css' rel='stylesheet' />
  <link href='assets/github.css' type='text/css' rel='stylesheet' />
  <link href='assets/split.css' type='text/css' rel='stylesheet' />
  <script>
    (function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
    ga('create', 'UA-121685077-2', 'auto');
    ga('send', 'pageview');
  </script>
</head>
<body class='documentation m0'>
    <div class='flex'>
      <div id='split-left' class='overflow-auto fs0 height-viewport-100'>
        <div class='py1 px2'>
          <h3 class='mb0 no-anchor'>react-d3-graph</h3>
          <div class='mb1'><code>2.0.2</code></div>
          <h3>Quick Links</h3>
          <h4><a href="https://github.com/danielcaldas/react-d3-graph" target="_blank">🔗 GitHub Repo</a></h4>
          <h4><a href="https://danielcaldas.github.io/react-d3-graph/sandbox/index.html" target="_blank">🔗 Live Demo</a></h4>
          <h5>Versions</h5>
<ul style="max-height:200px;overflow-y:scroll;overflow-x:hidden;">
            <li><a href="./index.html">2.5.0 <small>latest</small> 🚀</a></li>
            <li><a href="./2.4.1.html">2.4.1</a></li>
            <li><a href="./2.3.0.html">2.3.0</a></li>
            <li><a href="./2.2.0.html">2.2.0</a></li>
            <li><a href="./2.1.0.html">2.1.0</a></li>
            <li><a href="./2.0.2.html">2.0.2</a></li>
            <li><a href="./1.3.0.html">1.3.0</a></li>
            <li><a href="./1.2.2.html">1.2.2</a></li>
            <li><a href="./1.2.0.html">1.2.0</a></li>
            <li><a href="./1.0.1.html">1.0.1</a></li>
            <li><a href="./1.0.0.html">1.0.0</a></li>
            <li><a href="./0.4.0.html">0.4.0</a></li>
            <li><a href="./0.3.0.html">0.3.0</a></li>
          </ul>
          <input
            placeholder='Filter'
            id='filter-input'
            class='col12 block input'
            type='text' />
          <div id='toc'>
            <ul class='list-reset h5 py1-ul'>


                <li><a
                  href='#graphconfig'
                  class="">
                  graph.config

                </a>

                </li>


                <li><a
                  href='#graph'
                  class=" toggle-sibling">
                  Graph
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>


                    <ul class='list-reset py1-ul pl1'>
                      <li class='h5'><span>Instance members</span></li>

                      <li><a
                        href='#graph_generatefocusanimationprops'
                        class='regular pre-open'>
                        #_generateFocusAnimationProps
                      </a></li>

                      <li><a
                        href='#graph_graphforcesconfig'
                        class='regular pre-open'>
                        #_graphForcesConfig
                      </a></li>

                      <li><a
                        href='#graph_ondragend'
                        class='regular pre-open'>
                        #_onDragEnd
                      </a></li>

                      <li><a
                        href='#graph_ondragmove'
                        class='regular pre-open'>
                        #_onDragMove
                      </a></li>

                      <li><a
                        href='#graph_ondragstart'
                        class='regular pre-open'>
                        #_onDragStart
                      </a></li>

                      <li><a
                        href='#graph_setnodehighlightedvalue'
                        class='regular pre-open'>
                        #_setNodeHighlightedValue
                      </a></li>

                      <li><a
                        href='#graph_tick'
                        class='regular pre-open'>
                        #_tick
                      </a></li>

                      <li><a
                        href='#graph_zoomconfig'
                        class='regular pre-open'>
                        #_zoomConfig
                      </a></li>

                      <li><a
                        href='#graph_zoomed'
                        class='regular pre-open'>
                        #_zoomed
                      </a></li>

                      <li><a
                        href='#graphonclickgraph'
                        class='regular pre-open'>
                        #onClickGraph
                      </a></li>

                      <li><a
                        href='#graphonclicknode'
                        class='regular pre-open'>
                        #onClickNode
                      </a></li>

                      <li><a
                        href='#graphonmouseovernode'
                        class='regular pre-open'>
                        #onMouseOverNode
                      </a></li>

                      <li><a
                        href='#graphonmouseoutnode'
                        class='regular pre-open'>
                        #onMouseOutNode
                      </a></li>

                      <li><a
                        href='#graphonmouseoverlink'
                        class='regular pre-open'>
                        #onMouseOverLink
                      </a></li>

                      <li><a
                        href='#graphonmouseoutlink'
                        class='regular pre-open'>
                        #onMouseOutLink
                      </a></li>

                      <li><a
                        href='#graphpausesimulation'
                        class='regular pre-open'>
                        #pauseSimulation
                      </a></li>

                      <li><a
                        href='#graphresetnodespositions'
                        class='regular pre-open'>
                        #resetNodesPositions
                      </a></li>

                      <li><a
                        href='#graphrestartsimulation'
                        class='regular pre-open'>
                        #restartSimulation
                      </a></li>

                      <li><a
                        href='#graphcomponentwillreceiveprops'
                        class='regular pre-open'>
                        #componentWillReceiveProps
                      </a></li>

                    </ul>



                </div>

                </li>


                <li><a
                  href='#graphrenderer'
                  class=" toggle-sibling">
                  Graph/renderer
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#graphrenderer_renderlinks'
                        class='regular pre-open'>
                        ._renderLinks
                      </a></li>

                      <li><a
                        href='#graphrenderer_rendernodes'
                        class='regular pre-open'>
                        ._renderNodes
                      </a></li>

                      <li><a
                        href='#graphrenderer_renderdefs'
                        class='regular pre-open'>
                        ._renderDefs
                      </a></li>

                      <li><a
                        href='#graphrenderer_memoizedrenderdefs'
                        class='regular pre-open'>
                        ._memoizedRenderDefs
                      </a></li>

                      <li><a
                        href='#graphrendererrendergraph'
                        class='regular pre-open'>
                        .renderGraph
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#graphbuilder'
                  class=" toggle-sibling">
                  Graph/builder
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#graphbuilder_getnodeopacity'
                        class='regular pre-open'>
                        ._getNodeOpacity
                      </a></li>

                      <li><a
                        href='#graphbuilderbuildlinkprops'
                        class='regular pre-open'>
                        .buildLinkProps
                      </a></li>

                      <li><a
                        href='#graphbuilderbuildnodeprops'
                        class='regular pre-open'>
                        .buildNodeProps
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#graphhelper'
                  class=" toggle-sibling">
                  Graph/helper
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#graphhelpernode'
                        class='regular pre-open'>
                        .Node
                      </a></li>

                      <li><a
                        href='#graphhelperlink'
                        class='regular pre-open'>
                        .Link
                      </a></li>

                      <li><a
                        href='#graphhelper_createforcesimulation'
                        class='regular pre-open'>
                        ._createForceSimulation
                      </a></li>

                      <li><a
                        href='#graphhelper_initializelinks'
                        class='regular pre-open'>
                        ._initializeLinks
                      </a></li>

                      <li><a
                        href='#graphhelper_initializenodes'
                        class='regular pre-open'>
                        ._initializeNodes
                      </a></li>

                      <li><a
                        href='#graphhelper_mapdatalinktod3link'
                        class='regular pre-open'>
                        ._mapDataLinkToD3Link
                      </a></li>

                      <li><a
                        href='#graphhelper_tagorphannodes'
                        class='regular pre-open'>
                        ._tagOrphanNodes
                      </a></li>

                      <li><a
                        href='#graphhelper_validategraphdata'
                        class='regular pre-open'>
                        ._validateGraphData
                      </a></li>

                      <li><a
                        href='#graphhelpercheckforgraphelementschanges'
                        class='regular pre-open'>
                        .checkForGraphElementsChanges
                      </a></li>

                      <li><a
                        href='#graphhelpercheckforgraphconfigchanges'
                        class='regular pre-open'>
                        .checkForGraphConfigChanges
                      </a></li>

                      <li><a
                        href='#graphhelpergetcenterandzoomtransformation'
                        class='regular pre-open'>
                        .getCenterAndZoomTransformation
                      </a></li>

                      <li><a
                        href='#graphhelperinitializegraphstate'
                        class='regular pre-open'>
                        .initializeGraphState
                      </a></li>

                      <li><a
                        href='#graphhelperupdatenodehighlightedvalue'
                        class='regular pre-open'>
                        .updateNodeHighlightedValue
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#graphcollapse-helper'
                  class=" toggle-sibling">
                  Graph/collapse-helper
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#graphcollapse-helper_isleafdirected'
                        class='regular pre-open'>
                        ._isLeafDirected
                      </a></li>

                      <li><a
                        href='#graphcollapse-helper_isleafnotdirected'
                        class='regular pre-open'>
                        ._isLeafNotDirected
                      </a></li>

                      <li><a
                        href='#graphcollapse-helper_isleaf'
                        class='regular pre-open'>
                        ._isLeaf
                      </a></li>

                      <li><a
                        href='#graphcollapse-helpercomputenodedegree'
                        class='regular pre-open'>
                        .computeNodeDegree
                      </a></li>

                      <li><a
                        href='#graphcollapse-helpergettargetleafconnections'
                        class='regular pre-open'>
                        .getTargetLeafConnections
                      </a></li>

                      <li><a
                        href='#graphcollapse-helperisnodevisible'
                        class='regular pre-open'>
                        .isNodeVisible
                      </a></li>

                      <li><a
                        href='#graphcollapse-helpertogglelinksconnections'
                        class='regular pre-open'>
                        .toggleLinksConnections
                      </a></li>

                      <li><a
                        href='#graphcollapse-helpertogglelinksmatrixconnections'
                        class='regular pre-open'>
                        .toggleLinksMatrixConnections
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#node'
                  class=" toggle-sibling">
                  Node
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>


                    <ul class='list-reset py1-ul pl1'>
                      <li class='h5'><span>Instance members</span></li>

                      <li><a
                        href='#nodehandleonclicknode'
                        class='regular pre-open'>
                        #handleOnClickNode
                      </a></li>

                      <li><a
                        href='#nodehandleonrightclicknode'
                        class='regular pre-open'>
                        #handleOnRightClickNode
                      </a></li>

                      <li><a
                        href='#nodehandleonmouseovernode'
                        class='regular pre-open'>
                        #handleOnMouseOverNode
                      </a></li>

                      <li><a
                        href='#nodehandleonmouseoutnode'
                        class='regular pre-open'>
                        #handleOnMouseOutNode
                      </a></li>

                    </ul>



                </div>

                </li>


                <li><a
                  href='#nodehelper'
                  class=" toggle-sibling">
                  Node/helper
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#nodehelper_converttypetod3symbol'
                        class='regular pre-open'>
                        ._convertTypeToD3Symbol
                      </a></li>

                      <li><a
                        href='#nodehelperbuildsvgsymbol'
                        class='regular pre-open'>
                        .buildSvgSymbol
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#link'
                  class=" toggle-sibling">
                  Link
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>


                    <ul class='list-reset py1-ul pl1'>
                      <li class='h5'><span>Instance members</span></li>

                      <li><a
                        href='#linkhandleonclicklink'
                        class='regular pre-open'>
                        #handleOnClickLink
                      </a></li>

                      <li><a
                        href='#linkhandleonrightclicklink'
                        class='regular pre-open'>
                        #handleOnRightClickLink
                      </a></li>

                      <li><a
                        href='#linkhandleonmouseoverlink'
                        class='regular pre-open'>
                        #handleOnMouseOverLink
                      </a></li>

                      <li><a
                        href='#linkhandleonmouseoutlink'
                        class='regular pre-open'>
                        #handleOnMouseOutLink
                      </a></li>

                    </ul>



                </div>

                </li>


                <li><a
                  href='#linkhelper'
                  class=" toggle-sibling">
                  Link/helper
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#linkhelperstraightlineradius'
                        class='regular pre-open'>
                        .straightLineRadius
                      </a></li>

                      <li><a
                        href='#linkhelpersmoothcurveradius'
                        class='regular pre-open'>
                        .smoothCurveRadius
                      </a></li>

                      <li><a
                        href='#linkhelperfullcurveradius'
                        class='regular pre-open'>
                        .fullCurveRadius
                      </a></li>

                      <li><a
                        href='#linkhelpergetradiusstrategy'
                        class='regular pre-open'>
                        .getRadiusStrategy
                      </a></li>

                      <li><a
                        href='#linkhelperbuildlinkpathdefinition'
                        class='regular pre-open'>
                        .buildLinkPathDefinition
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#linkconst'
                  class=" toggle-sibling">
                  Link/const
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#linkconstline_types'
                        class='regular pre-open'>
                        .LINE_TYPES
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#marker'
                  class="">
                  Marker

                </a>

                </li>


                <li><a
                  href='#markerhelper'
                  class=" toggle-sibling">
                  Marker/helper
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#markerhelper_markerkeybuilder'
                        class='regular pre-open'>
                        ._markerKeyBuilder
                      </a></li>

                      <li><a
                        href='#markerhelper_getmarkersize'
                        class='regular pre-open'>
                        ._getMarkerSize
                      </a></li>

                      <li><a
                        href='#markerhelper_computemarkerid'
                        class='regular pre-open'>
                        ._computeMarkerId
                      </a></li>

                      <li><a
                        href='#markerhelper_memoizedcomputemarkerid'
                        class='regular pre-open'>
                        ._memoizedComputeMarkerId
                      </a></li>

                      <li><a
                        href='#markerhelpergetmarkerid'
                        class='regular pre-open'>
                        .getMarkerId
                      </a></li>

                    </ul>




                </div>

                </li>


                <li><a
                  href='#utils'
                  class=" toggle-sibling">
                  utils
                  <span class='icon'>▸</span>
                </a>

                <div class='toggle-target display-none'>

                  <ul class='list-reset py1-ul pl1'>
                    <li class='h5'><span>Static members</span></li>

                      <li><a
                        href='#utils_ispropertynestedobject'
                        class='regular pre-open'>
                        ._isPropertyNestedObject
                      </a></li>

                      <li><a
                        href='#utilsisdeepequal'
                        class='regular pre-open'>
                        .isDeepEqual
                      </a></li>

                      <li><a
                        href='#utilsisemptyobject'
                        class='regular pre-open'>
                        .isEmptyObject
                      </a></li>

                      <li><a
                        href='#utilsdeepclone'
                        class='regular pre-open'>
                        .deepClone
                      </a></li>

                      <li><a
                        href='#utilsmerge'
                        class='regular pre-open'>
                        .merge
                      </a></li>

                      <li><a
                        href='#utilspick'
                        class='regular pre-open'>
                        .pick
                      </a></li>

                      <li><a
                        href='#utilsantipick'
                        class='regular pre-open'>
                        .antiPick
                      </a></li>

                      <li><a
                        href='#utilsthrowerr'
                        class='regular pre-open'>
                        .throwErr
                      </a></li>

                    </ul>




                </div>

                </li>

            </ul>
          </div>
          <div class='mt1 h6 quiet'>
            <a href='http://documentation.js.org/reading-documentation.html'>Need help reading this?</a>
          </div>
        </div>
      </div>
      <div id='split-right' class='relative overflow-auto height-viewport-100'>


            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graphconfig'>
      graph.config
    </h3>


  </div>


  <div style="text-align: right;"><i>This is certainly the only extra piece of documentation that you will ever need</i></div>
<br/><br/>
Here you can consult a detailed description of each graph configurable property as well as the default values
of those properties.
<p><strong>Note about performance</strong><br/>
Some of the properties have a major performance impact when toggled while rendering graphs of medium or large dimensions (hundreds or thousand of elements).
These properties are marked with 🚅🚅🚅.<br/>
⭐ <strong>tip</strong> <em>to achieve smoother interactions you may want to provide a toggle to set <strong>staticGraph</strong> to <strong>true</strong> </em><br/>
<br/>
<strong>Note about granularity</strong><br/>
Some of the properties listed in the <a href="#config-node">Node section</a> are marked with 🔍🔍🔍. This means that this properties
have a higher level of granularity. These properties can be defined in the graph payload at a node level. (sample payload below)</p>
<pre class='hljs'><span class="hljs-keyword">const</span> graph = {
    <span class="hljs-attr">nodes</span>: [
        {
            <span class="hljs-attr">id</span>: <span class="hljs-string">"id"</span>,
            <span class="hljs-attr">color</span>: <span class="hljs-string">"red"</span>,         <span class="hljs-comment">// only this node will be red</span>
            size: <span class="hljs-number">300</span>,            <span class="hljs-comment">// only this node will have size 300</span>
            symbolType: <span class="hljs-string">"diamond"</span> <span class="hljs-comment">// only this node will have "diamond" shape</span>
        }
    ],
    <span class="hljs-attr">links</span>: [...]
};</pre>
<br/>
<ul>
<li><a href="#config-global">Graph global configurations</a></li>
<li><a href="#config-d3">d3 level configurations</a></li>
<li><a href="#config-node">Node level configurations</a></li>
<li><a href="#config-link">Link level configurations</a></li>
</ul>
<br/>
<h2 id="config-global"><a href="#config-global">#</a>  Graph global configurations</h2>


  <div class='pre p1 fill-light mt0'>graph.config</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>automaticRearrangeAfterDropNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    🚅🚅🚅 when true performing a node drag and drop should automatically
rearrange all nodes positions based on new position of dragged node (note:
<strong>staticGraph</strong>
 should be false).

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>collapsible</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    🚅🚅🚅 Allow leaf neighbors nodes to be collapsed (folded), this will allow users to clear the way out and focus on the parts of the graph that really matter.
To see an example of this behavior you can access <a href="https://danielcaldas.github.io/react-d3-graph/sandbox/index.html?data=marvel" target="_blank" title="sandbox collapsible example">this sandbox link</a> that has a specific set up to experiment this feature.
<strong>NOTE</strong>
: At this moment
nodes without connections (orphan nodes) are not rendered when this property is activated (see
<a href="https://github.com/danielcaldas/react-d3-graph/issues/129">react-d3-graph/issues/#129</a>
).

<br/>


<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-collapsible.gif?raw=true" width="820" height="480"/>

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>directed</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    This property makes react-d3-graph handle your graph as a directed graph. It will
out of the box provide the look and feel of a directed graph and add directional semantic to links. You can see a sample in the image below.

<br/>


<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-directed.gif?raw=true" width="820" height="480"/>

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>focusZoom</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>1</code>)</code>
	    zoom that will be applied when the graph view is focused in a node. Its value must be between

<em>minZoom</em>
 and
<em>maxZoom</em>
. If the specified
<em>focusZoom</em>
 is out of this range,
<em>minZoom</em>
 or
<em>maxZoom</em>
 will be applied instead.

<strong>NOTE:</strong>
 This animation is not trigger by default. In order to trigger it you need to pass down to
<code>react-d3-graph</code>
 the
node that you want to focus via prop
<code>focusedNodeId</code>
 along side with nodes and links:
<pre class='hljs'><span class="hljs-keyword">const</span> data = {
   <span class="hljs-attr">nodes</span>: <span class="hljs-keyword">this</span>.state.data.nodes,
   <span class="hljs-attr">links</span>: <span class="hljs-keyword">this</span>.state.data.links,
   <span class="hljs-attr">focusedNodeId</span>: <span class="hljs-string">"nodeIdToTriggerZoomAnimation"</span>
};</pre>
<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-zoom-animation.gif?raw=true" width="820" height="480"/>

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>focusAnimationDuration</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>0.75</code>)</code>
	    duration (in seconds) for the animation that takes place when focusing the graph on a node.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>height</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>400</code>)</code>
	    the height of the (svg) area where the graph will be rendered.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeHighlightBehavior</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    🚅🚅🚅 when user mouse hovers a node that node and adjacent common
connections will be highlighted (depending on the
<em>highlightDegree</em>
 value). All the remaining nodes and links assume opacity value equal to
<strong>highlightOpacity</strong>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linkHighlightBehavior</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    🚅🚅🚅 when the user mouse hovers some link that link and the correspondent nodes will be highlighted, this is a similar behavior
to
<em>nodeHighlightBehavior</em>
 but for links
<small>
(just for historical reference this property was introduced in
<strong>v1.0.0</strong>
)
</small>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightDegree</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>1</code>)</code>
	    <strong>Possible values: 0, 1 or 2</strong>
. This value represents the range of the
highlight behavior when some node is highlighted. If the value is set to
<strong>0</strong>
 only the selected node will be
highlighted. If the value is set to
<strong>1</strong>
 the selected node and his 1st degree connections will be highlighted. If
the value is set to
<strong>2</strong>
 the selected node will be highlighted as well as the 1st and 2nd common degree connections.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightOpacity</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>1</code>)</code>
	    this value is used to highlight nodes in the network. The lower
the value the more the less highlighted nodes will be visible (related to
<em>nodeHighlightBehavior</em>
).

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>maxZoom</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>8</code>)</code>
	    max zoom that can be performed against the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>minZoom</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>0.1</code>)</code>
	    min zoom that can be performed against the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>panAndZoom</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    🚅🚅🚅 pan and zoom effect when performing zoom in the graph,
a similar functionality may be consulted
<a href="https://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39">here</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>staticGraph</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    when setting this value to true the graph will be completely static, thus
all forces and drag events upon nodes will produce not effect. Note that, if this value is true the nodes will be
rendered with the initial provided
<strong>x and y coordinates</strong>
 (links positions will be automatically set
from the given nodes positions by rd3g), no coordinates will be calculated by rd3g or subjacent d3 modules.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>width</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>800</code>)</code>
	    the width of the (svg) area where the graph will be rendered.

<br/>

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>d3</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    d3 object is explained in next section. ⬇️
<h2 id="config-d3"><a href="#config-d3">#</a> d3 level configurations</h2>

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>d3.alphaTarget</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>0.05</code>)
  </td>
  <td class='break-word'><span><a href="https://github.com/d3/d3-force#simulation_alphaTarget">see d3-force simulation.alphaTarget</a>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>d3.gravity</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>-100</code>)
  </td>
  <td class='break-word'><span>this will define how close nodes are to each other (
<a href="https://github.com/d3/d3-force#forces">see d3 reference for forces</a>
).
<ul>
<li>If value is positive, nodes will attract each other.</li>
<li>If value is negative, nodes will repel each other. Most of the times this is what we want, so nodes don"t overlap.</li>
</ul>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>d3.linkLength</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>100</code>)
  </td>
  <td class='break-word'><span>the length of each link from the center of the nodes it joins.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>d3.linkStrength</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>1</code>)
  </td>
  <td class='break-word'><span><a href="https://github.com/d3/d3-force#link_strength">see d3-force link.strength</a>


<br/>
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>node</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    node object is explained in next section. ⬇️
<h2 id="config-node"><a href="#config-node">#</a> Node level configurations</h2>

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>node.color</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;#d3d3d3&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 this is the color that will be applied to the node if no
<strong>color property</strong>

is found inside the node itself (yes
<strong>you can pass a property "color" inside the node and that color will override the
this default one</strong>
).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.fontColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;black&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 fill color for node"s
<text>
 svg label.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.fontSize</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>8</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>

property for all nodes" labels.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.fontWeight</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;normal&quot;</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>

property for all nodes" labels.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.highlightColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;SAME&quot;</code>)
  </td>
  <td class='break-word'><span>color for all highlighted nodes (use string "SAME" if you
want the node to keep its color in highlighted state).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.highlightFontSize</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>8</code>)
  </td>
  <td class='break-word'><span>fontSize in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.highlightFontWeight</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;normal&quot;</code>)
  </td>
  <td class='break-word'><span>fontWeight in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.highlightStrokeColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;SAME&quot;</code>)
  </td>
  <td class='break-word'><span>strokeColor in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.highlightStrokeWidth</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>&quot;SAME&quot;</code>)
  </td>
  <td class='break-word'><span>strokeWidth in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.labelProperty</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>)</code>

    (default <code>&quot;id&quot;</code>)
  </td>
  <td class='break-word'><span>this is the node property that will be used in runtime to
fetch the label content. You just need to add some property (e.g. firstName) to the node payload and then set
node.labelProperty to be
<strong>"firstName"</strong>
.
<strong>This can also be a function!</strong>
, if you pass a function here it will be called
to obtain the
<code>label</code>
 value on the fly, as a client you will receive all the node information that you passed down into react-d3-graph,
so the signature of the function would be:
<pre class='hljs'><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">myCustomLabelBuilder</span>(<span class="hljs-params">node</span>) </span>{
    <span class="hljs-comment">// do stuff to get the final result...</span>
    <span class="hljs-keyword">return</span> <span class="hljs-string">"label string"</span>;
}</pre>
<p>Then you just need to make sure that you pass this function in the config in <code>config.node.labelProperty</code>.
<br/></p>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.mouseCursor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;pointer&quot;</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>

property for when some node is mouse hovered.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.opacity</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>1</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 - by default all nodes will have this opacity value.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.renderLabel</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>

    (default <code>true</code>)
  </td>
  <td class='break-word'><span>when set to false no labels will appear along side nodes in the
graph.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.size</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>200</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 defines the size of all nodes.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.strokeColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;none&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍  this is the stroke color that will be applied to the node if no
<strong>strokeColor property</strong>
 is found inside the node itself (yes
<strong>you can pass a property "strokeColor" inside the node and that stroke color will override this default one</strong>
 ).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.strokeWidth</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>1.5</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 - the width of the all node strokes.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.svg</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 render custom svg for nodes in alternative to
<strong>node.symbolType</strong>
. This svg can
be provided as a string to either a remote svg resource or for a local one.

<br/>


<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-custom-svg.gif?raw=true" width="820" height="480"/>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.symbolType</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;circle&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 the
<span id="node-symbol-type">
shape
</span>
 of the node.
Use the following values under a property
<strong>type</strong>
 inside each node (nodes may have different types, same as colors):
<ul>
<li>"circle"</li>
<li>"cross"</li>
<li>"diamond"</li>
<li>"square"</li>
<li>"star"</li>
<li>"triangle"</li>
<li>"wye"</li>
</ul>
<p><strong>[note]</strong> react-d3-graph will map this values to <a href="https://github.com/d3/d3-shape#symbols">d3 symbols</a></p>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>node.viewGenerator</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></code>

    (default <code>null</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 function that receives a node and returns a JSX view.

<br/>
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>link</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    link object is explained in the next section. ⬇️
<h2 id="config-link"><a href="#config-link">#</a> Link level configurations</h2>

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>link.color</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;#d3d3d3&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 the color for links
(from version 1.3.0 this property can be configured at link level).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.fontColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;black&quot;</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 fill color for link's
<text>
 svg label.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.fontSize</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>8</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-size?v=control">font-size</a>

property for all links' labels.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.fontWeight</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;normal&quot;</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en/docs/Web/CSS/font-weight?v=control">font-weight</a>

property for all links' labels.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.highlightColor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;#d3d3d3&quot;</code>)
  </td>
  <td class='break-word'><span>links' color in highlight state.

<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.highlightFontSize</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>8</code>)
  </td>
  <td class='break-word'><span>fontSize in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.highlightFontWeight</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;normal&quot;</code>)
  </td>
  <td class='break-word'><span>fontWeight in highlighted state.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.labelProperty</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>

    (default <code>&quot;label&quot;</code>)
  </td>
  <td class='break-word'><span>the property that will be rendered as label within some link. Note that
this property needs to be passed along the link payload (along side with source and target).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.mouseCursor</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;pointer&quot;</code>)
  </td>
  <td class='break-word'><span><a href="https://developer.mozilla.org/en/docs/Web/CSS/cursor?v=control">cursor</a>

property for when link is mouse hovered.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.opacity</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>1</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 - the default opacity value for links.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.renderLabel</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>

    (default <code>false</code>)
  </td>
  <td class='break-word'><span>when set to true labels will appear along side links in the
graph.
<strong>Note</strong>
: this will only happen of course if proper label is passed within the link, check also
<code>link.labelProperty</code>
.

<br/>


<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-link-render-label.png?raw=true" width="820" height="480"/>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.semanticStrokeWidth</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>

    (default <code>false</code>)
  </td>
  <td class='break-word'><span>when set to true all links will have

<em>"semantic width"</em>
, this means that the width of the connections will be proportional to the value of each link.
This is how link strokeWidth will be calculated:
<pre class='hljs'>strokeWidth += (linkValue * strokeWidth) / 10;</pre>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.strokeWidth</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>

    (default <code>1.5</code>)
  </td>
  <td class='break-word'><span>🔍🔍🔍 - strokeWidth for all links. By default the actual value is obtain by the
following expression:
<pre class='hljs'>link.strokeWidth * (<span class="hljs-number">1</span> / transform); <span class="hljs-comment">// transform is a zoom delta Δ value</span></pre>
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.type</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>

    (default <code>&quot;STRAIGHT&quot;</code>)
  </td>
  <td class='break-word'><span>the type of line to draw, available types at this point are:
<ul>
<li>"STRAIGHT" <small>(default)</small> - a straight line.</li>
<li>"CURVE_SMOOTH" - a slight curve between two nodes</li>
<li>"CURVE_FULL" - a semicircumference trajectory unites source and target nodes.
<br/>
<img src="https://github.com/danielcaldas/react-d3-graph/blob/master/docs/rd3g-bend.gif?raw=true" width="820" height="480"/></li>
</ul>
</span></td>
</tr>



            </tbody>
          </table>

        </div>

    </div>









    <div class='py1 quiet mt1 prose-big'>Example</div>


      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// A simple config that uses some properties</span>
<span class="hljs-keyword">const</span> myConfig = {
    <span class="hljs-attr">nodeHighlightBehavior</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">node</span>: {
        <span class="hljs-attr">color</span>: <span class="hljs-string">"lightgreen"</span>,
        <span class="hljs-attr">size</span>: <span class="hljs-number">120</span>,
        <span class="hljs-attr">highlightStrokeColor</span>: <span class="hljs-string">"blue"</span>
    },
    <span class="hljs-attr">link</span>: {
        <span class="hljs-attr">highlightColor</span>: <span class="hljs-string">"lightblue"</span>
    }
};

<span class="hljs-comment">// Sorry for the long config description, here"s a potato 🥔.</span></pre>








</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graph'>
      Graph
    </h3>


  </div>


  <p>Graph component is the main component for react-d3-graph components, its interface allows its user
to build the graph once the user provides the data, configuration (optional) and callback interactions (also optional).
The code for the <a href="https://danielcaldas.github.io/react-d3-graph/sandbox/index.html">live example</a>
can be consulted <a href="https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.jsx">here</a></p>


  <div class='pre p1 fill-light mt0'>new Graph(props: any)</div>


    <p>
      Extends

        React.Component

    </p>










    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>props</span> <code class='quiet'>(any)</code>

          </div>

        </div>

    </div>









    <div class='py1 quiet mt1 prose-big'>Example</div>


      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { Graph } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-d3-graph'</span>;

<span class="hljs-comment">// graph payload (with minimalist structure)</span>
<span class="hljs-keyword">const</span> data = {
    <span class="hljs-attr">nodes</span>: [
      {<span class="hljs-attr">id</span>: <span class="hljs-string">'Harry'</span>},
      {<span class="hljs-attr">id</span>: <span class="hljs-string">'Sally'</span>},
      {<span class="hljs-attr">id</span>: <span class="hljs-string">'Alice'</span>}
    ],
    <span class="hljs-attr">links</span>: [
        {<span class="hljs-attr">source</span>: <span class="hljs-string">'Harry'</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">'Sally'</span>},
        {<span class="hljs-attr">source</span>: <span class="hljs-string">'Harry'</span>, <span class="hljs-attr">target</span>: <span class="hljs-string">'Alice'</span>},
    ]
};

<span class="hljs-comment">// the graph configuration, you only need to pass down properties</span>
<span class="hljs-comment">// that you want to override, otherwise default ones will be used</span>
<span class="hljs-keyword">const</span> myConfig = {
    <span class="hljs-attr">nodeHighlightBehavior</span>: <span class="hljs-literal">true</span>,
    <span class="hljs-attr">node</span>: {
        <span class="hljs-attr">color</span>: <span class="hljs-string">'lightgreen'</span>,
        <span class="hljs-attr">size</span>: <span class="hljs-number">120</span>,
        <span class="hljs-attr">highlightStrokeColor</span>: <span class="hljs-string">'blue'</span>
    },
    <span class="hljs-attr">link</span>: {
        <span class="hljs-attr">highlightColor</span>: <span class="hljs-string">'lightblue'</span>
    }
};

<span class="hljs-comment">// graph event callbacks</span>
<span class="hljs-keyword">const</span> onClickGraph = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Clicked the graph background'</span>);
};

<span class="hljs-keyword">const</span> onClickNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Clicked node ${nodeId}'</span>);
};

<span class="hljs-keyword">const</span> onRightClickNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event, nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Right clicked node ${nodeId}'</span>);
};

<span class="hljs-keyword">const</span> onMouseOverNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse over node <span class="hljs-subst">${nodeId}</span>`</span>);
};

<span class="hljs-keyword">const</span> onMouseOutNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse out node <span class="hljs-subst">${nodeId}</span>`</span>);
};

<span class="hljs-keyword">const</span> onClickLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Clicked link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="hljs-keyword">const</span> onRightClickLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">event, source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Right clicked link between ${source} and ${target}'</span>);
};

<span class="hljs-keyword">const</span> onMouseOverLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse over in link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="hljs-keyword">const</span> onMouseOutLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse out link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Graph</span>
     <span class="hljs-attr">id</span>=<span class="hljs-string">'graph-id'</span> // <span class="hljs-attr">id</span> <span class="hljs-attr">is</span> <span class="hljs-attr">mandatory</span>, <span class="hljs-attr">if</span> <span class="hljs-attr">no</span> <span class="hljs-attr">id</span> <span class="hljs-attr">is</span> <span class="hljs-attr">defined</span> <span class="hljs-attr">rd3g</span> <span class="hljs-attr">will</span> <span class="hljs-attr">throw</span> <span class="hljs-attr">an</span> <span class="hljs-attr">error</span>
     <span class="hljs-attr">data</span>=<span class="hljs-string">{data}</span>
     <span class="hljs-attr">config</span>=<span class="hljs-string">{myConfig}</span>
     <span class="hljs-attr">onClickGraph</span>=<span class="hljs-string">{onClickGraph}</span>
     <span class="hljs-attr">onClickNode</span>=<span class="hljs-string">{onClickNode}</span>
     <span class="hljs-attr">onRightClickNode</span>=<span class="hljs-string">{onRightClickNode}</span>
     <span class="hljs-attr">onClickLink</span>=<span class="hljs-string">{onClickLink}</span>
     <span class="hljs-attr">onRightClickLink</span>=<span class="hljs-string">{onRightClickLink}</span>
     <span class="hljs-attr">onMouseOverNode</span>=<span class="hljs-string">{onMouseOverNode}</span>
     <span class="hljs-attr">onMouseOutNode</span>=<span class="hljs-string">{onMouseOutNode}</span>
     <span class="hljs-attr">onMouseOverLink</span>=<span class="hljs-string">{onMouseOverLink}</span>
     <span class="hljs-attr">onMouseOutLink</span>=<span class="hljs-string">{onMouseOutLink}/</span>&gt;</span></span></pre>






    <div class='py1 quiet mt1 prose-big'>Instance Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='graph_generatefocusanimationprops'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_generateFocusAnimationProps</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Obtain a set of properties which will be used to perform the focus and zoom animation if
required. In case there's not a focus and zoom animation in progress, it should reset the
transition duration to zero and clear transformation styles.</p>


  <div class='pre p1 fill-light mt0'>_generateFocusAnimationProps</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        Focus and zoom animation properties.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_graphforcesconfig'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_graphForcesConfig()</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Sets d3 tick function and configures other d3 stuff such as forces and drag events.</p>


  <div class='pre p1 fill-light mt0'>_graphForcesConfig(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_ondragend'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_onDragEnd</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles d3 drag 'end' event.</p>


  <div class='pre p1 fill-light mt0'>_onDragEnd</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_ondragmove'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_onDragMove</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles d3 'drag' event.
<a href="https://github.com/d3/d3-drag/blob/master/README.md#drag_subject">more about d3 drag</a></p>


  <div class='pre p1 fill-light mt0'>_onDragMove</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>ev</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    if not undefined it will contain event data.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>index</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    index of the node that is being dragged.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeList</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    array of d3 nodes. This list of nodes is provided by d3, each
node contains all information that was previously fed by rd3g.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_ondragstart'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_onDragStart</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles d3 drag 'start' event.</p>


  <div class='pre p1 fill-light mt0'>_onDragStart</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_setnodehighlightedvalue'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_setNodeHighlightedValue</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Sets nodes and links highlighted value.</p>


  <div class='pre p1 fill-light mt0'>_setNodeHighlightedValue</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    the id of the node to highlight.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>value</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>
            = <code>false</code>)</code>
	    the highlight value to be set (true or false).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_tick'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_tick</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>The tick function simply calls React set state in order to update component and render nodes
along time as d3 calculates new node positioning.</p>


  <div class='pre p1 fill-light mt0'>_tick</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>state</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
            = <code>{}</code>)</code>
	    new state to pass on.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>cb</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>?)</code>
	    optional callback to fed in to
<a href="setState()">https://reactjs.org/docs/react-component.html#setstate</a>
.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_zoomconfig'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_zoomConfig</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Configures zoom upon graph with default or user provided values.<br/>
<a href="https://github.com/d3/d3-zoom#zoom">https://github.com/d3/d3-zoom#zoom</a></p>


  <div class='pre p1 fill-light mt0'>_zoomConfig</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graph_zoomed'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_zoomed</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handler for 'zoom' event within zoom config.</p>


  <div class='pre p1 fill-light mt0'>_zoomed</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns the transformed elements within the svg graph area.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonclickgraph'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onClickGraph</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Calls the callback passed to the component.</p>


  <div class='pre p1 fill-light mt0'>onClickGraph</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>e</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    The event of onClick handler.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonclicknode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onClickNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Collapses the nodes, then calls the callback passed to the component.</p>


  <div class='pre p1 fill-light mt0'>onClickNode</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>clickedNodeId</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    The id of the node where the click was performed.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonmouseovernode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onMouseOverNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles mouse over node event.</p>


  <div class='pre p1 fill-light mt0'>onMouseOverNode</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the node that participates in the event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonmouseoutnode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onMouseOutNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles mouse out node event.</p>


  <div class='pre p1 fill-light mt0'>onMouseOutNode</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the node that participates in the event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonmouseoverlink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onMouseOverLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles mouse over link event.</p>


  <div class='pre p1 fill-light mt0'>onMouseOverLink</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>source</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the source node that participates in the event.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>target</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the target node that participates in the event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphonmouseoutlink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>onMouseOutLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handles mouse out link event.</p>


  <div class='pre p1 fill-light mt0'>onMouseOutLink</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>source</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the source node that participates in the event.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>target</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    id of the target node that participates in the event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphpausesimulation'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>pauseSimulation</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Calls d3 simulation.stop().<br/>
<a href="https://github.com/d3/d3-force#simulation_stop">https://github.com/d3/d3-force#simulation_stop</a></p>


  <div class='pre p1 fill-light mt0'>pauseSimulation</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphresetnodespositions'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>resetNodesPositions</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This method resets all nodes fixed positions by deleting the properties fx (fixed x)
and fy (fixed y). Following this, a simulation is triggered in order to force nodes to go back
to their original positions (or at least new positions according to the d3 force parameters).</p>


  <div class='pre p1 fill-light mt0'>resetNodesPositions</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphrestartsimulation'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>restartSimulation</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Calls d3 simulation.restart().<br/>
<a href="https://github.com/d3/d3-force#simulation_restart">https://github.com/d3/d3-force#simulation_restart</a></p>


  <div class='pre p1 fill-light mt0'>restartSimulation</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcomponentwillreceiveprops'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>componentWillReceiveProps(nextProps)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>





  <div class='pre p1 fill-light mt0'>componentWillReceiveProps(nextProps: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></div>



  <div>Deprecated: <code>componentWillReceiveProps</code>
 has a replacement method in react v16.3 onwards.
that is getDerivedStateFromProps.
But one needs to be aware that if an anti pattern of
<code>componentWillReceiveProps</code>
 is
in place for this implementation the migration might not be that easy.
See
<a href="https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html">https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html</a>
.
</div>







    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nextProps</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    props.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

</div>




</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graphrenderer'>
      Graph/renderer
    </h3>


  </div>


  <p>Offers a series of methods that isolate render logic for Graph component.</p>


  <div class='pre p1 fill-light mt0'>Graph/renderer</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='graphrenderer_renderlinks'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_renderLinks(nodes, links, linksMatrix, config, linkCallbacks, highlightedNode, highlightedLink, transform)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Build Link components given a list of links.</p>


  <div class='pre p1 fill-light mt0'>_renderLinks(nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, linkCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    same as
<a href="#graphrenderer">nodes in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    array of links
<a href="#Link">Link</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    array of links
<a href="#Link">Link</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linkCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>)</code>
	    same as
<a href="#graphrenderer">linkCallbacks in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    same as
<a href="#graphrenderer">highlightedNode in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">highlightedLink in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    value that indicates the amount of zoom transformation.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        returns the generated array of Link components.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphrenderer_rendernodes'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_renderNodes(nodes, nodeCallbacks, config, highlightedNode, highlightedLink, transform, linksMatrix)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Function that builds Node components.</p>


  <div class='pre p1 fill-light mt0'>_renderNodes(nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, nodeCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing all nodes mapped by their id.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>)</code>
	    array of callbacks for used defined event handler for node interactions.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    an object containing rd3g consumer defined configurations
<a href="#config">config</a>
 for the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    this value contains a string that represents the some currently highlighted node.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    this object contains a source and target property for a link that is highlighted at some point in time.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>highlightedLink.source</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
  </td>
  <td class='break-word'><span>id of source node for highlighted link.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>highlightedLink.target</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
  </td>
  <td class='break-word'><span>id of target node for highlighted link.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    value that indicates the amount of zoom transformation.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    the matrix of connections of the graph

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        returns the generated array of node components














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphrenderer_renderdefs'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_renderDefs()</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Builds graph defs (for now markers, but we could also have gradients for instance).
NOTE: defs are static svg graphical objects, thus we only need to render them once, the result
is cached on the 1st call and from there we simply return the cached jsx.</p>


  <div class='pre p1 fill-light mt0'>_renderDefs(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></code>:
        memoized build definitions function.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphrenderer_memoizedrenderdefs'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_memoizedRenderDefs</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Memoized reference for _renderDefs.</p>


  <div class='pre p1 fill-light mt0'>_memoizedRenderDefs</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    an object containing rd3g consumer defined configurations
<a href="#config">config</a>
 for the graph.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        graph reusable objects
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/defs">defs</a>
.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphrendererrendergraph'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>renderGraph(nodes, nodeCallbacks, links, linksMatrix, linkCallbacks, config, highlightedNode, highlightedLink, transform)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Method that actually is exported an consumed by Graph component in order to build all Nodes and Link
components.</p>


  <div class='pre p1 fill-light mt0'>renderGraph(nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, nodeCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, linkCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing all nodes mapped by their id.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>)</code>
	    array of callbacks for used defined event handler for node interactions.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    array of links
<a href="#Link">Link</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing a matrix of connections of the graph, for each nodeId,
there is an Object that maps adjacent nodes ids (string) and their values (number).
<pre class='hljs'> <span class="hljs-comment">// links example</span>
 {
    <span class="hljs-string">"Androsynth"</span>: {
        <span class="hljs-string">"Chenjesu"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Ilwrath"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Mycon"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Spathi"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Umgah"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"VUX"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Guardian"</span>: <span class="hljs-number">1</span>
    },
    <span class="hljs-string">"Chenjesu"</span>: {
        <span class="hljs-string">"Androsynth"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Mycon"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Spathi"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Umgah"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"VUX"</span>: <span class="hljs-number">1</span>,
        <span class="hljs-string">"Broodhmome"</span>: <span class="hljs-number">1</span>
    },
    ...
 }</pre>

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linkCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>)</code>
	    array of callbacks for used defined event handler for link interactions.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    an object containing rd3g consumer defined configurations
<a href="#config">config</a>
 for the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    this value contains a string that represents the some currently highlighted node.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    this object contains a source and target property for a link that is highlighted at some point in time.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>highlightedLink.source</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
  </td>
  <td class='break-word'><span>id of source node for highlighted link.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>highlightedLink.target</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
  </td>
  <td class='break-word'><span>id of target node for highlighted link.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    value that indicates the amount of zoom transformation.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns an object containing the generated nodes and links that form the graph.














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graphbuilder'>
      Graph/builder
    </h3>


  </div>


  <p>Offers a series of methods that isolate the way graph elements are built (nodes and links mainly).</p>


  <div class='pre p1 fill-light mt0'>Graph/builder</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='graphbuilder_getnodeopacity'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_getNodeOpacity(node, highlightedNode, highlightedLink, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Get the correct node opacity in order to properly make decisions based on context such as currently highlighted node.</p>


  <div class='pre p1 fill-light mt0'>_getNodeOpacity(node: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>node</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the node object for whom we will generate properties.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    same as
<a href="#graphrenderer">highlightedNode in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">highlightedLink in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
        the opacity value for the given node.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphbuilderbuildlinkprops'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>buildLinkProps(link, nodes, links, config, linkCallbacks, highlightedNode, highlightedLink, transform)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Build some Link properties based on given parameters.</p>


  <div class='pre p1 fill-light mt0'>buildLinkProps(link: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, linkCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>link</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the link object for which we will generate properties.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    same as
<a href="#graphrenderer">nodes in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    same as
<a href="#graphrenderer">links in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linkCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>)</code>
	    same as
<a href="#graphrenderer">linkCallbacks in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    same as
<a href="#graphrenderer">highlightedNode in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">highlightedLink in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    value that indicates the amount of zoom transformation.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns an object that aggregates all props for creating respective Link component instance.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphbuilderbuildnodeprops'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>buildNodeProps(node, config, nodeCallbacks, highlightedNode, highlightedLink, transform)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Build some Node properties based on given parameters.</p>


  <div class='pre p1 fill-light mt0'>buildNodeProps(node: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, nodeCallbacks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>, highlightedNode: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlightedLink: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>node</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the node object for whom we will generate properties.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeCallbacks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a>>
            = <code>{}</code>)</code>
	    same as
<a href="#graphrenderer">nodeCallbacks in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedNode</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    same as
<a href="#graphrenderer">highlightedNode in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlightedLink</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">highlightedLink in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    value that indicates the amount of zoom transformation.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns object that contain Link props ready to be feeded to the Link component.














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graphhelper'>
      Graph/helper
    </h3>


  </div>


  <p>Offers a series of methods that isolate logic of Graph component and also from Graph rendering methods.</p>


  <div class='pre p1 fill-light mt0'>Graph/helper</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='graphhelpernode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>Node</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>





  <div class='pre p1 fill-light mt0'>Node</div>

    <p>
      Type:
      <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
    </p>













    <div class='py1 quiet mt1 prose-big'>Properties</div>
    <div>

        <div class='space-bottom0'>
          <span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : the id of the node.


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>color</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
          : color of the node (optional).


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>fontColor</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
          : node text label font color (optional).


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>size</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
          : size of the node (optional).


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>symbolType</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
          : symbol type of the node (optional).


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>svg</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>?)</code>
          : custom svg for node (optional).


        </div>

    </div>













</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelperlink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>Link</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>





  <div class='pre p1 fill-light mt0'>Link</div>

    <p>
      Type:
      <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
    </p>













    <div class='py1 quiet mt1 prose-big'>Properties</div>
    <div>

        <div class='space-bottom0'>
          <span class='code bold'>source</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : the node id of the source in the link.


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>target</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : the node id of the target in the link.


        </div>

    </div>













</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_createforcesimulation'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_createForceSimulation(width, height, gravity)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Create d3 forceSimulation to be applied on the graph.<br/>
<a href="https://github.com/d3/d3-force#forceSimulation">d3-force#forceSimulation</a><br/>
<a href="https://github.com/d3/d3-force#simulation_force">d3-force#simulation_force</a><br/>
Wtf is a force? <a href="https://github.com/d3/d3-force#forces"> here</a></p>


  <div class='pre p1 fill-light mt0'>_createForceSimulation(width: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, height: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, gravity: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>width</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the width of the container area of the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>height</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the height of the container area of the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>gravity</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the force strength applied to the graph.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns the simulation instance to be consumed.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_initializelinks'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_initializeLinks(graphLinks, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Receives a matrix of the graph with the links source and target as concrete node instances and it transforms it
in a lightweight matrix containing only links with source and target being strings representative of some node id
and the respective link value (if non existent will default to 1).</p>


  <div class='pre p1 fill-light mt0'>_initializeLinks(graphLinks: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#link">Link</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>graphLinks</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#link">Link</a>>)</code>
	    an array of all graph links.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the graph config.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_initializenodes'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_initializeNodes(graphNodes)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Method that initialize graph nodes provided by rd3g consumer and adds additional default mandatory properties
that are optional for the user. Also it generates an index mapping, this maps nodes ids the their index in the array
of nodes. This is needed because d3 callbacks such as node click and link click return the index of the node.</p>


  <div class='pre p1 fill-light mt0'>_initializeNodes(graphNodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#node">Node</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>graphNodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="#node">Node</a>>)</code>
	    the array of nodes provided by the rd3g consumer.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        returns the nodes ready to be used within rd3g with additional properties such as x, y
and highlighted values.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_mapdatalinktod3link'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_mapDataLinkToD3Link(link, index, d3Links, config, state)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Maps an input link (with format <code>{ source: 'sourceId', target: 'targetId' }</code>) to a d3Link
(with format <code>{ source: { id: 'sourceId' }, target: { id: 'targetId' } }</code>). If d3Link with
given index exists already that same d3Link is returned.</p>


  <div class='pre p1 fill-light mt0'>_mapDataLinkToD3Link(link: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, index: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, d3Links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, state: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>link</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    input link.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>index</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    index of the input link.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>d3Links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>
            = <code>[]</code>)</code>
	    all d3Links.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>state</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
            = <code>{}</code>)</code>
	    Graph component current state (same format as returned object on this function).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        a d3Link.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_tagorphannodes'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_tagOrphanNodes(nodes, linksMatrix)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Tags orphan nodes with a <code>_orphan</code> flag.</p>


  <div class='pre p1 fill-light mt0'>_tagOrphanNodes(nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    nodes mapped by their id.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        same input nodes structure with tagged orphans nodes where applicable.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelper_validategraphdata'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_validateGraphData(data)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Some integrity validations on links and nodes structure. If some validation fails the function will
throw an error.</p>


  <div class='pre p1 fill-light mt0'>_validateGraphData(data: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>data</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    Same as
<a href="#initializeGraphState">data in initializeGraphState</a>
.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:







    <div class='py1 quiet mt1 prose-big'>Throws</div>
    <ul>

        <li>any: can throw the following error msg:
INSUFFICIENT_DATA - msg if no nodes are provided
INVALID_LINKS - if links point to nonexistent nodes
</li>

    </ul>









</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelpercheckforgraphelementschanges'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>checkForGraphElementsChanges(nextProps, currentState)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function checks for graph elements (nodes and links) changes, in two different
levels of significance, updated elements (whether some property has changed in some
node or link) and new elements (whether some new elements or added/removed from the graph).</p>


  <div class='pre p1 fill-light mt0'>checkForGraphElementsChanges(nextProps: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, currentState: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nextProps</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    nextProps that graph will receive.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>currentState</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the current state of the graph.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>></code>:
        returns object containing update check flags:
<ul>
<li>newGraphElements - flag that indicates whether new graph elements were added.</li>
<li>graphElementsUpdated - flag that indicates whether some graph elements have
updated (some property that is not in NODE_PROPERTIES_DISCARD_TO_COMPARE was added to
some node or link or was updated).</li>
</ul>














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelpercheckforgraphconfigchanges'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>checkForGraphConfigChanges(nextProps, currentState)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Logic to check for changes in graph config.</p>


  <div class='pre p1 fill-light mt0'>checkForGraphConfigChanges(nextProps: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, currentState: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nextProps</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    nextProps that graph will receive.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>currentState</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the current state of the graph.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>></code>:
        returns object containing update check flags:
<ul>
<li>configUpdated - global flag that indicates if any property was updated.</li>
<li>d3ConfigUpdated - specific flag that indicates changes in d3 configurations.</li>
</ul>














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelpergetcenterandzoomtransformation'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>getCenterAndZoomTransformation(d3Node, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Returns the transformation to apply in order to center the graph on the
selected node.</p>


  <div class='pre p1 fill-light mt0'>getCenterAndZoomTransformation(d3Node: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>d3Node</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    node to focus the graph view on.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
        transform rule to apply.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelperinitializegraphstate'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>initializeGraphState(props, state)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Encapsulates common procedures to initialize graph.</p>


  <div class='pre p1 fill-light mt0'>initializeGraphState(props: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, state: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>props</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    Graph component props, object that holds data, id and config.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>props.data</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>
  </td>
  <td class='break-word'><span>Data object holds links (array of
<strong>Link</strong>
) and nodes (array of
<strong>Node</strong>
).
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>props.id</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>
  </td>
  <td class='break-word'><span>the graph id.
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>props.config</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>
  </td>
  <td class='break-word'><span>same as
<a href="#graphrenderer">config in renderGraph</a>
.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>state</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    Graph component current state (same format as returned object on this function).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        a fully (re)initialized graph state object.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphhelperupdatenodehighlightedvalue'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>updateNodeHighlightedValue(nodes, links, config, id, value)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function updates the highlighted value for a given node and also updates highlight props.</p>


  <div class='pre p1 fill-light mt0'>updateNodeHighlightedValue(nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, id: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, value: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing all nodes mapped by their id.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing a matrix of connections of the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    an object containing rd3g consumer defined configurations
<a href="#config">config</a>
 for the graph.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>id</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    identifier of node to update.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>value</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
            = <code>false</code>)</code>
	    new highlight value for given node.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        returns an object containing the updated nodes
and the id of the highlighted node.














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='graphcollapse-helper'>
      Graph/collapse-helper
    </h3>


  </div>


  <p>Offers a series of methods that allow graph to perform the necessary operations to
create the collapsible behavior.</p>
<p>Developer notes - collapsing nodes and maintaining state on links matrix.</p>
<p>User interaction flow (for a collapsible graph)
1. User clicks node
2. All leaf connections of that node are not rendered anymore
3. User clicks on same node
4. All leaf connections of that node are rendered</p>
<p>Internal react-d3-graph flow
1. User clicks node
2. Compute leaf connections for clicked node (rootNode, root as in 'root' of the event)
3. Update connections matrix (based on 2.)
4. Update d3Links array with toggled connections (based on 2.)</p>


  <div class='pre p1 fill-light mt0'>Graph/collapse-helper</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='graphcollapse-helper_isleafdirected'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_isLeafDirected(inDegree, outDegree)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>For directed graphs.
Check based on node degrees whether it is a leaf node or not.</p>


  <div class='pre p1 fill-light mt0'>_isLeafDirected(inDegree: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, outDegree: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>inDegree</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the in degree for a given node.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>outDegree</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the out degree for a given node.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        based on the degrees tells whether node is leaf or not.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helper_isleafnotdirected'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_isLeafNotDirected(inDegree, outDegree)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>For not directed graphs.
Check based on node degrees whether it is a leaf node or not.</p>


  <div class='pre p1 fill-light mt0'>_isLeafNotDirected(inDegree: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, outDegree: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>inDegree</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the in degree for a given node.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>outDegree</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the out degree for a given node.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        based on the degrees tells whether node is leaf or not.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helper_isleaf'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_isLeaf(nodeId, linksMatrix, directed)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Given in and out degree tells whether degrees indicate a leaf or non leaf scenario.</p>


  <div class='pre p1 fill-light mt0'>_isLeaf(nodeId: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>>, directed: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeId</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    The id of the node to get the cardinality of.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>>)</code>
	    An object containing a matrix of connections of the nodes.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>directed</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
	    whether graph in context is directed or not.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        flag that indicates whether node is leaf or not.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helpercomputenodedegree'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>computeNodeDegree(nodeId, linksMatrix)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Calculates degree (in and out) of some provided node.</p>


  <div class='pre p1 fill-light mt0'>computeNodeDegree(nodeId: (<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>), linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeId</span> <code class='quiet'>((<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a> | <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>))</code>
	    the id of the node whom degree we want to compute.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>
            = <code>{}</code>)</code>
	    an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>></code>:
        returns object containing in and out degree of the node:
<ul>
<li>inDegree: number</li>
<li>outDegree: number</li>
</ul>














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helpergettargetleafconnections'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>getTargetLeafConnections(rootNodeId, linksMatrix, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Given a node id we want to calculate the list of leaf connections</p>


  <div class='pre p1 fill-light mt0'>getTargetLeafConnections(rootNodeId: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>rootNodeId</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    node who's leafs we want to calculate.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>
            = <code>{}</code>)</code>
	    an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>config.directed</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>
  </td>
  <td class='break-word'><span>tells whether linksMatrix represents a directed graph or not.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>></code>:
        a list of leaf connections.
What is a leaf connection? A leaf connection is a link between some node A and other node B
where A has id equal to rootNodeId and B has inDegree 1 and outDegree 0 (or outDegree 1 but the connection is with A).














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helperisnodevisible'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>isNodeVisible(nodeId, nodes, linksMatrix)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Given a node and the connections matrix, check if node should be displayed
NOTE: this function is meant to be used under the <code>collapsible</code> toggle, meaning
that the <code>isNodeVisible</code> actually is checking visibility on collapsible graphs.
If you think that this code is confusing and could potentially collide (🤞) with #_isLeaf
always remember that <em>A leaf can, through time, be both a visible or an invisible node!</em>.</p>


  <div class='pre p1 fill-light mt0'>isNodeVisible(nodeId: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, nodes: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodeId</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    The id of the node to get the cardinality of

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>nodes</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing all nodes mapped by their id.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>>)</code>
	    An object containing a matrix of connections of the nodes.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        flag that indicates whether node should or not be displayed.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helpertogglelinksconnections'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>toggleLinksConnections(d3Links, connectionMatrix)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Updates d3Links by toggling given connections</p>


  <div class='pre p1 fill-light mt0'>toggleLinksConnections(d3Links: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, connectionMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>d3Links</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    An array containing all the d3 links.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>connectionMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>>)</code>
	    connections to toggle.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        updated d3Links.














</section>

      </div>
    </div>

    <div class='border-bottom' id='graphcollapse-helpertogglelinksmatrixconnections'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>toggleLinksMatrixConnections(linksMatrix, connections, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Update matrix given array of connections to toggle.</p>


  <div class='pre p1 fill-light mt0'>toggleLinksMatrixConnections(linksMatrix: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>, connections: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>linksMatrix</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>>)</code>
	    an object containing a matrix of connections of the graph, for each nodeId,
there is an object that maps adjacent nodes ids (string) and their values (number).

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>connections</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>>)</code>
	    connections to toggle on matrix.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    same as
<a href="#graphrenderer">config in renderGraph</a>
.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>config.directed</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>
  </td>
  <td class='break-word'><span>tells whether linksMatrix represents a directed graph or not.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>></code>:
        updated linksMatrix














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='node'>
      Node
    </h3>


  </div>


  <p>Node component is responsible for encapsulating node render.</p>


  <div class='pre p1 fill-light mt0'>new Node()</div>


    <p>
      Extends

        React.Component

    </p>


















    <div class='py1 quiet mt1 prose-big'>Example</div>


      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">const</span> onClickNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Clicked node'</span>, nodeId);
};

<span class="hljs-keyword">const</span> onRightClickNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Right clicked node'</span>, nodeId);
}

<span class="hljs-keyword">const</span> onMouseOverNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Mouse over node'</span>, nodeId);
};

<span class="hljs-keyword">const</span> onMouseOutNode = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">nodeId</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">'Mouse out node'</span>, nodeId);
};

&lt;Node
    id='nodeId'
    cx=22
    cy=22
    fill='green'
    fontSize=10
    fontColor='black'
    fontWeight='normal'
    dx=90
    label='label text'
    opacity=1
    renderLabel=true
    size=200
    stroke='none'
    strokeWidth=1.5
    svg='assets/my-svg.svg'
    type='square'
    viewGenerator=(node) =&gt; &lt;CustomComponent node={node} /&gt;
    className='node'
    onClickNode={onClickNode}
    onRightClickNode={onRightClickNode}
    onMouseOverNode={onMouseOverNode}
    onMouseOutNode={onMouseOutNode} /&gt;</pre>






    <div class='py1 quiet mt1 prose-big'>Instance Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='nodehandleonclicknode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnClickNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle click on the node.</p>


  <div class='pre p1 fill-light mt0'>handleOnClickNode</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='nodehandleonrightclicknode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnRightClickNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle right click on the node.</p>


  <div class='pre p1 fill-light mt0'>handleOnRightClickNode</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>event</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    native event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='nodehandleonmouseovernode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnMouseOverNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle mouse over node event.</p>


  <div class='pre p1 fill-light mt0'>handleOnMouseOverNode</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='nodehandleonmouseoutnode'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnMouseOutNode</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle mouse out node event.</p>


  <div class='pre p1 fill-light mt0'>handleOnMouseOutNode</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

</div>




</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='nodehelper'>
      Node/helper
    </h3>


  </div>


  <p>Some methods that help no the process of rendering a node.</p>


  <div class='pre p1 fill-light mt0'>Node/helper</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='nodehelper_converttypetod3symbol'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_convertTypeToD3Symbol(typeName)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Converts a string that specifies a symbol into a concrete instance
of d3 symbol.<br/>
<a href="https://github.com/d3/d3-shape/blob/master/README.md#symbol">https://github.com/d3/d3-shape/blob/master/README.md#symbol</a></p>


  <div class='pre p1 fill-light mt0'>_convertTypeToD3Symbol(typeName: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>typeName</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    the string that specifies the symbol type (should be one of
<a href="#node-symbol-type">node.symbolType</a>
).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        concrete instance of d3 symbol (defaults to circle).














</section>

      </div>
    </div>

    <div class='border-bottom' id='nodehelperbuildsvgsymbol'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>buildSvgSymbol(size, symbolTypeDesc)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Build a d3 svg symbol based on passed symbol and symbol type.</p>


  <div class='pre p1 fill-light mt0'>buildSvgSymbol(size: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, symbolTypeDesc: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>size</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>80</code>)</code>
	    the size of the symbol.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>symbolTypeDesc</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
            = <code>&#39;circle&#39;</code>)</code>
	    the string containing the type of symbol that we want to build
(should be one of
<a href="#node-symbol-type">node.symbolType</a>
).

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        concrete instance of d3 symbol.














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='link'>
      Link
    </h3>


  </div>


  <p>Link component is responsible for encapsulating link render.</p>


  <div class='pre p1 fill-light mt0'>new Link()</div>


    <p>
      Extends

        React.Component

    </p>


















    <div class='py1 quiet mt1 prose-big'>Example</div>


      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">const</span> onClickLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Clicked link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="hljs-keyword">const</span> onRightClickLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Right clicked link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="hljs-keyword">const</span> onMouseOverLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse over in link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="hljs-keyword">const</span> onMouseOutLink = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">source, target</span>) </span>{
     <span class="hljs-built_in">window</span>.alert(<span class="hljs-string">`Mouse out link between <span class="hljs-subst">${source}</span> and <span class="hljs-subst">${target}</span>`</span>);
};

<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">Link</span>
    <span class="hljs-attr">d</span>=<span class="hljs-string">"M1..."</span>
    <span class="hljs-attr">source</span>=<span class="hljs-string">"idSourceNode"</span>
    <span class="hljs-attr">target</span>=<span class="hljs-string">"idTargetNode"</span>
    <span class="hljs-attr">markerId</span>=<span class="hljs-string">"marker-small"</span>
    <span class="hljs-attr">strokeWidth</span>=<span class="hljs-string">1.5</span>
    <span class="hljs-attr">stroke</span>=<span class="hljs-string">"green"</span>
    <span class="hljs-attr">className</span>=<span class="hljs-string">"link"</span>
    <span class="hljs-attr">opacity</span>=<span class="hljs-string">1</span>
    <span class="hljs-attr">mouseCursor</span>=<span class="hljs-string">"pointer"</span>
    <span class="hljs-attr">onClickLink</span>=<span class="hljs-string">{onClickLink}</span>
    <span class="hljs-attr">onRightClickLink</span>=<span class="hljs-string">{onRightClickLink}</span>
    <span class="hljs-attr">onMouseOverLink</span>=<span class="hljs-string">{onMouseOverLink}</span>
    <span class="hljs-attr">onMouseOutLink</span>=<span class="hljs-string">{onMouseOutLink}</span> /&gt;</span></span></pre>






    <div class='py1 quiet mt1 prose-big'>Instance Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='linkhandleonclicklink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnClickLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle link click event.</p>


  <div class='pre p1 fill-light mt0'>handleOnClickLink</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhandleonrightclicklink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnRightClickLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle link right click event.</p>


  <div class='pre p1 fill-light mt0'>handleOnRightClickLink</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>event</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    native event.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhandleonmouseoverlink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnMouseOverLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle mouse over link event.</p>


  <div class='pre p1 fill-light mt0'>handleOnMouseOverLink</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhandleonmouseoutlink'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>handleOnMouseOutLink</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Handle mouse out link event.</p>


  <div class='pre p1 fill-light mt0'>handleOnMouseOutLink</div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></code>:















</section>

      </div>
    </div>

</div>




</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='linkhelper'>
      Link/helper
    </h3>


  </div>


  <p>A set of helper methods to manipulate/create links.</p>


  <div class='pre p1 fill-light mt0'>Link/helper</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='linkhelperstraightlineradius'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>straightLineRadius()</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Computes radius value for a straight line.</p>


  <div class='pre p1 fill-light mt0'>straightLineRadius(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
        radius for straight line.














</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhelpersmoothcurveradius'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>smoothCurveRadius(x1, y1, x2, y2)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Computes radius for a smooth curve effect.</p>


  <div class='pre p1 fill-light mt0'>smoothCurveRadius(x1: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, y1: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, x2: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, y2: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>x1</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    x value for point 1

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>y1</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    y value for point 1

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>x2</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    y value for point 2

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>y2</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    y value for point 2

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
        value of radius.














</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhelperfullcurveradius'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>fullCurveRadius()</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Computes radius value for a full curve (semi circumference).</p>


  <div class='pre p1 fill-light mt0'>fullCurveRadius(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
        radius for full curve.














</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhelpergetradiusstrategy'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>getRadiusStrategy(type)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Get a strategy to compute line radius.<br/>
<em>CURVE_SMOOTH</em> type inspired by <a href="http://bl.ocks.org/mbostock/1153292">mbostock - Mobile Patent Suits</a>.</p>


  <div class='pre p1 fill-light mt0'>getRadiusStrategy(type: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>type</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
            = <code>LINE_TYPES.STRAIGHT</code>)</code>
	    type of curve to get radius strategy from.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></code>:
        a function that calculates a radius
to match curve type expectation. Fallback is the straight line.














</section>

      </div>
    </div>

    <div class='border-bottom' id='linkhelperbuildlinkpathdefinition'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>buildLinkPathDefinition(link, type)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This method returns the path definition for a given link base on the line type
and the link source and target.
<a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d">d attribute mdn</a></p>


  <div class='pre p1 fill-light mt0'>buildLinkPathDefinition(link: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, type: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>link</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the link to build the path definition

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>link.source</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>

    (default <code>{}</code>)
  </td>
  <td class='break-word'><span>link source
</span></td>
</tr>



                <tr>
  <td class='break-word'><span class='code bold'>link.target</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>

    (default <code>{}</code>)
  </td>
  <td class='break-word'><span>link target
</span></td>
</tr>



            </tbody>
          </table>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>type</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>
            = <code>LINE_TYPES.STRAIGHT</code>)</code>
	    the link line type

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
        the path definition for the requested link














</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='linkconst'>
      Link/const
    </h3>


  </div>


  <p>A set of constants that facilitate readability regarding links.</p>


  <div class='pre p1 fill-light mt0'>Link/const</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='linkconstline_types'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>LINE_TYPES</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>





  <div class='pre p1 fill-light mt0'>LINE_TYPES</div>

    <p>
      Type:
      <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
    </p>













    <div class='py1 quiet mt1 prose-big'>Properties</div>
    <div>

        <div class='space-bottom0'>
          <span class='code bold'>STRAIGHT</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : a straight line.


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>CURVE_SMOOTH</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : a slight curve between two nodes


        </div>

        <div class='space-bottom0'>
          <span class='code bold'>CURVE_FULL</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
          : a semicircumference trajectory unites source and target nodes.


        </div>

    </div>













</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='marker'>
      Marker
    </h3>


  </div>


  <p>Market component provides configurable interface to marker definition.</p>


  <div class='pre p1 fill-light mt0'>new Marker()</div>


    <p>
      Extends

        React.Component

    </p>


















    <div class='py1 quiet mt1 prose-big'>Example</div>


      <pre class='p1 overflow-auto round fill-light'>&lt;Marker id=<span class="hljs-string">"marker-id"</span> fill=<span class="hljs-string">"black"</span> /&gt;</pre>








</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='markerhelper'>
      Marker/helper
    </h3>


  </div>


  <p>Offers a series of methods to compute proper markers within a given context.</p>


  <div class='pre p1 fill-light mt0'>Marker/helper</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='markerhelper_markerkeybuilder'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_markerKeyBuilder(size, highlighted)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function is a key template builder to access MARKERS structure.
WARN: function tightly coupled to the MARKERS object in marker.const.</p>


  <div class='pre p1 fill-light mt0'>_markerKeyBuilder(size: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, highlighted: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>size</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    string that indicates size of marker.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlighted</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    string that indicates highlight state of marker.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
        the key of the marker.














</section>

      </div>
    </div>

    <div class='border-bottom' id='markerhelper_getmarkersize'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_getMarkerSize(transform, mMax, lMax)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This functions returns the proper marker size given the inputs that describe the scenario
where the marker is to be applied.</p>


  <div class='pre p1 fill-light mt0'>_getMarkerSize(transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, mMax: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, lMax: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the delta zoom value to calculate resize transformations.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>mMax</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    a derived value from the max zoom config.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>lMax</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    a derived value from the min zoom config.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
        the size.














</section>

      </div>
    </div>

    <div class='border-bottom' id='markerhelper_computemarkerid'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_computeMarkerId(highlight, transform, config)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function holds logic to retrieve the appropriate marker id that reflects the input
parameters, markers can vary with highlight and transform value.</p>


  <div class='pre p1 fill-light mt0'>_computeMarkerId(highlight: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>, transform: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>, config: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlight</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
	    tells us whether or not some element (link or node) is highlighted.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the delta zoom value to calculate resize transformations.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the graph config object.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>config.maxZoom</span> <code class='quiet'>any</code>
  </td>
  <td class='break-word'><span></span></td>
</tr>



            </tbody>
          </table>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a></code>:
        the id of the result marker.














</section>

      </div>
    </div>

    <div class='border-bottom' id='markerhelper_memoizedcomputemarkerid'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_memoizedComputeMarkerId()</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function memoize results for _computeMarkerId
since many of the times user will be playing around with the same zoom
factor, we can take advantage of this and cache the results for a
given combination of highlight state, zoom transform value and maxZoom config.</p>


  <div class='pre p1 fill-light mt0'>_memoizedComputeMarkerId(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></div>
















      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function">Function</a></code>:
        memoize wrapper to the _computeMarkerId operation.














</section>

      </div>
    </div>

    <div class='border-bottom' id='markerhelpergetmarkerid'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>getMarkerId</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Memoized reference for _memoizedComputeMarkerId exposed
as getter for sake of readability.
Gets proper marker id given the highlight state and the zoom
transform.</p>


  <div class='pre p1 fill-light mt0'>getMarkerId</div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>highlight</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a>)</code>
	    tells us whether or not some element (link or node) is highlighted.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>transform</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
	    the delta zoom value to calculate resize transformations.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>config</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the graph config object.

          </div>

          <table class='mt1 mb2 fixed-table h5 col-12'>
            <colgroup>
              <col width='30%' />
              <col width='70%' />
            </colgroup>
            <thead>
              <tr class='bold fill-light'>
                <th>Name</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody class='mt1'>

                <tr>
  <td class='break-word'><span class='code bold'>config.maxZoom</span> <code class='quiet'><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>
  </td>
  <td class='break-word'><span>max zoom that can be performed against the graph.
</span></td>
</tr>



            </tbody>
          </table>

        </div>

    </div>















</section>

      </div>
    </div>

</div>






</section>




            <section class='p2 mb2 clearfix bg-white minishadow'>


  <div class='clearfix'>

    <h3 class='fl m0' id='utils'>
      utils
    </h3>


  </div>


  <p>Offers a series of generic methods for object manipulation, and other operations
that are common across rd3g such as error logging.</p>


  <div class='pre p1 fill-light mt0'>utils</div>





















    <div class='py1 quiet mt1 prose-big'>Static Members</div>
    <div class="clearfix">

    <div class='border-bottom' id='utils_ispropertynestedobject'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>_isPropertyNestedObject(o, k)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Checks whether a certain object property is from object type and is a non empty object.</p>


  <div class='pre p1 fill-light mt0'>_isPropertyNestedObject(o: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, k: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the object.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>k</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    the object property.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        returns true if o
[k]
 is an non empty object.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsisdeepequal'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>isDeepEqual(o1, o2, _depth)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Generic deep comparison between javascript simple or complex objects.</p>


  <div class='pre p1 fill-light mt0'>isDeepEqual(o1: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, o2: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, _depth: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o1</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    one of the objects to be compared.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o2</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    second object to compare with first.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>_depth</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>0</code>)</code>
	    this parameter serves only for internal usage.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        returns true if o1 and o2 have exactly the same content, or are exactly the same object reference.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsisemptyobject'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>isEmptyObject(o)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Checks whether or not a certain object is empty.
NOTE: If the passed parameter is not an object the method return false.</p>


  <div class='pre p1 fill-light mt0'>isEmptyObject(o: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    object whom emptiness we want to check.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean">boolean</a></code>:
        true if the given object is n ft and object and is empty.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsdeepclone'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>deepClone(o, _clone, _depth)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Function to deep clone plain javascript objects.</p>


  <div class='pre p1 fill-light mt0'>deepClone(o: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, _clone: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, _depth: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the object to clone.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>_clone</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
            = <code>{}</code>)</code>
	    carries the cloned output throughout the
recursive calls. Parameter serves only for internal usage.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>_depth</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>
            = <code>0</code>)</code>
	    this parameter serves only for internal usage.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        the cloned object.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsmerge'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>merge(o1, o2, _depth)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>This function merges two objects o1 and o2, where o2 properties override existent o1 properties, and
if o2 doesn't posses some o1 property the fallback will be the o1 property.</p>


  <div class='pre p1 fill-light mt0'>merge(o1: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, o2: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, _depth: int): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o1</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
            = <code>{}</code>)</code>
	    object.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o2</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>
            = <code>{}</code>)</code>
	    object that will override o1 properties.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>_depth</span> <code class='quiet'>(int
            = <code>0</code>)</code>
	    the depth at which we are merging the object.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        object that is the result of merging o1 and o2, being o2 properties priority overriding
existent o1 properties.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilspick'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>pick(o, props)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Create new object from the inputted one only with the props passed
in the props list.</p>


  <div class='pre p1 fill-light mt0'>pick(o: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, props: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the object to pick props from.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>props</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>
            = <code>[]</code>)</code>
	    list of props that we want to pick from o.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        the object resultant from the picking operation.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsantipick'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>antiPick(o, props)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Picks all props except the ones passed in the props array.</p>


  <div class='pre p1 fill-light mt0'>antiPick(o: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>, props: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>o</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>)</code>
	    the object to pick props from.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>props</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&#x3C;<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>>
            = <code>[]</code>)</code>
	    list of props that we DON'T want to pick from o.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>:
        the object resultant from the anti picking operation.














</section>

      </div>
    </div>

    <div class='border-bottom' id='utilsthrowerr'>
      <div class="clearfix small pointer toggle-sibling">
        <div class="py1 contain">
            <a class='icon pin-right py1 dark-link caret-right'>▸</a>
            <span class='code strong strong truncate'>throwErr(component, msg)</span>
        </div>
      </div>
      <div class="clearfix display-none toggle-target">
        <section class='p2 mb2 clearfix bg-white minishadow'>



  <p>Helper function for customized error logging.</p>


  <div class='pre p1 fill-light mt0'>throwErr(component: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>, msg: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a></div>











    <div class='py1 quiet mt1 prose-big'>Parameters</div>
    <div class='prose'>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>component</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    the name of the component where the error is to be thrown.

          </div>

        </div>

        <div class='space-bottom0'>
          <div>
            <span class='code bold'>msg</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>)</code>
	    the message contain a more detailed explanation about the error.

          </div>

        </div>

    </div>






      <div class='py1 quiet mt1 prose-big'>Returns</div>
      <code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a></code>:
        the thrown error.














</section>

      </div>
    </div>

</div>






</section>



      </div>
    </div>
  <script src='assets/anchor.js'></script>
  <script src='assets/split.js'></script>
  <script src='assets/site.js'></script>
</body>
</html>
